<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <!-- <input type="text" id="btn1" /> -->
      <h1>1.v-model修饰符 .number 把字符串转成数字</h1>
      <input type="text" v-model.number="inf.num" />

      <h1>2.v-model修饰符 .trim 去除前后空格</h1>
      <input type="text" v-model.trim="inf.str" />

      <h1>3.v-model修饰符 .lazy 失去焦点触发</h1>
      <input type="text" v-model.lazy="inf.add" />

      <h1>4.键盘修饰符 @keyup.13 按下回车键</h1>
      <!-- <input type="text" @keyup.enter="getdata($event)" /> -->
      <input type="text" @keyup.13="getdata($event)" />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        inf: {
          num: 0,
          str: "",
        },
      },

      methods: {
        getdata(ev) {
          console.log(ev.target.value, "回车获取value值");
        },
      },

      watch: {
        inf: {
          //深度监听
          deep: true,
          handler(newval) {
            console.log(newval, "我变了");
          },
        },
      },
    });

    // let btn1 = document.querySelector("#btn1");
    // btn1.oninput = function () {
    //   //内容有变化就会触发
    //   console.log(this.value, "oninput内容有变化就会触发");
    // };

    // btn1.onchange = function () {
    //   //内容有变化，且失去焦点的时候触发
    //   console.log(this.value, "onchage内容有变化，且失去焦点的时候触发");
    // };

    // btn1.onblur = function () {
    //   //失去焦点都触发
    //   console.log(this.value, "onblur失去焦点都触发");
    // };

    // btn1.onfocus = function () {
    //   //聚焦的时候触发
    //   console.log(this.value, "onfocus聚焦的时候触发");
    // };
  </script>
</html>
